<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>特价_hao123</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="libs/swiper-bundle.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="./libs/iconfont.js"></script>
</head>

<body>
    <!-- 头部区域 -->
    <div class="header">
        <div class="box-center clearfix">
            <div class="login">
                <a href="./html/login.html"><span>请登录</span></a>
            </div>
            <div class="register">
                <span>退出</span>
            </div>
            <div class="logo-wraper">
                <a class="logo" href="">
                    <img src="./img/logo.png" alt="">
                </a>
                <a class="slogan" href="">便宜买好货</a>
            </div>
            <div class="search-wraper">
                <form class="search-form" action="http://tejia. hao123. com/search" target="_blank">
                    <input class="search-input" type="text" autocomplete="off" placeholder="你想要的都在这里">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sousuo"></use>
                    </svg>
                    <input class="search-btn" type="submit" value="搜索">
                </form>
                <div class="hotword clearfix">
                    <a class="word" href="">雨衣</a>
                    <a class="word" href="">内裤</a>
                    <a class="word" href="">空调</a>
                    <a class="word" href="">冰箱</a>
                    <a class="word" href="">凉鞋</a>
                    <a class="word" href="">连衣裙</a>
                    <a class="word" href="">鼠标</a>
                    <a class="word" href="">蓝牙耳机</a>
                    <a class="word" href="">电动车</a>
                    <a class="word" href="">电视盒子</a>
                    <a class="word" href="">风扇</a>
                    <a class="word" href="">雨伞</a>
                </div>
            </div>

            <div class="nav">
                <a>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daohang"></use>
                    </svg>网址导航
                </a>
                <div class="websites">
                    <div class="item">
                        <div class="title">休闲娱乐</div>
                        <div class="list">
                            <a class="pindao-a" href="">电影</a>
                            <a class="pindao-a" href="">动漫</a>
                            <a class="pindao-a" href="">综艺</a>
                            <a class="pindao-a" href="">视频</a>
                            <a class="pindao-a" href="">页游</a>
                            <a class="pindao-a" href="">小说</a>
                            <a class="pindao-a" href="">交友</a>
                            <a class="pindao-a" href="">体育</a>
                            <a class="pindao-a" href="">游戏</a>
                            <a class="pindao-a" href="">招聘</a>
                            <a class="pindao-a" href="">星座</a>
                            <a class="pindao-a" href="">电视剧</a>
                            <a class="pindao-a" href="">小游戏 </a>
                            <a class="pindao-a" href="">搞笑</a>
                            <a class="pindao-a" href="">爰好</a>
                            <a class="pindao-a" href="">特价</a>
                        </div>
                    </div>
                    <div class="item">
                        <div class="title">生活服务</div>
                        <div class="list">
                            <a class="pindao-a" href="">银行</a>
                            <a class="pindao-a" href="">房产</a>
                            <a class="pindao-a" href="">股票</a>
                            <a class="pindao-a" href="">天气</a>
                            <a class="pindao-a" href="">菜谱</a>
                            <a class="pindao-a" href="">汽车</a>
                            <a class="pindao-a" href="">地图</a>
                            <a class="pindao-a" href="">母婴</a>
                            <a class="pindao-a" href="">健康</a>
                            <a class="pindao-a" href="">家居</a>
                            <a class="pindao-a" href="">彩票</a>
                            <a class="pindao-a" href="">旅游</a>
                            <a class="pindao-a" href="">生活</a>
                            <a class="pindao-a" href="">情感</a>
                            <a class="pindao-a" href="">儿童</a>
                        </div>
                    </div>
                    <div class="item">
                        <div class="title">其他类别</div>
                        <div class="list">
                            <a class="pindao-a" href="">邮箱</a>
                            <a class="pindao-a" href="">微博</a>
                            <a class="pindao-a" href="">公益</a>
                            <a class="pindao-a" href="">宠物</a>
                            <a class="pindao-a" href="">杀毒</a>
                            <a class="pindao-a" href="">设计</a>
                            <a class="pindao-a" href="">电脑</a>
                            <a class="pindao-a" href="">桌面</a>
                            <a class="pindao-a" href="">行业</a>
                            <a class="pindao-a" href="">摄影</a>
                            <a class="pindao-a" href="">考试</a>
                            <a class="pindao-a" href="">学习</a>
                            <a class="pindao-a" href="">小清新</a>
                            <a class="pindao-a" href="">知识</a>
                            <a class="pindao-a" href="">英语.</a>
                            <a class="pindao-a" href="">军事</a>
                            <a class="pindao-a" href="">科学</a>
                            <a class="pindao-a" href="">时事</a>
                            <a class="pindao-a" href="">文化</a>
                            <a class="pindao-a" href="">空间</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 轮播菜单区域 -->
    <div class="line1 box-center">
        <div class="menu">
            <ul class="levelone">
                <li class="item">
                    <img src="./img/yifu.png" alt="" class="img">
                    <span class="list">
                        <a href="" class="a">男装</a>
                        <span class="dot">.</span>
                        <a href="" class="a">女装</a>
                        <span class="dot">.</span>
                        <a href="./html/man.html" class="a">服饰奢品</a>
                        <span class="dot">.</span>
                        <a href="" class="a">运动服饰</a>
                    </span>
                </li>
                <li class="item">
                    <img src="./img/jiaju.png" alt="" class="img">
                    <span class="list">
                        <a href="" class="a">家居</a>
                        <span class="dot">.</span>
                        <a href="" class="a">布艺</a>
                        <span class="dot">.</span>
                        <a href="" class="a">家具</a>
                        <span class="dot">.</span>
                        <a href="" class="a">厨具</a>
                    </span>
                </li>
                <li class="item">
                    <img src="./img/yinliao.png" alt="" class="img">
                    <span class="list">
                        <a href="" class="a">食品饮料</a>
                        <span class="dot">.</span>
                        <a href="" class="a">酒水</a>
                        <span class="dot">.</span>
                        <a href="" class="a">生鲜</a>
                    </span>
                </li>
                <li class="item">
                    <img src="./img/shuma.png" alt="" class="img">
                    <span class="list">
                        <a href="" class="a">数码</a>
                        <span class="dot">.</span>
                        <a href="" class="a">手机</a>
                        <span class="dot">.</span>
                        <a href="" class="a">电脑</a>
                        <span class="dot">.</span>
                        <a href="" class="a">家电</a>
                    </span>
                </li>
                <li class="item">
                    <img src="./img/car.png" alt="" class="img">
                    <span class="list">
                        <a href="" class="a">汽车用品</a>
                        <span class="dot">.</span>
                        <a href="" class="a">养护</a>
                        <span class="dot">.</span>
                        <a href="" class="a">配件</a>
                    </span>
                </li>
                <li class="item">
                    <img src="./img/huazhuang.png" alt="" class="img">
                    <span class="list">
                        <a href="" class="a">美妆</a>
                        <span class="dot">.</span>
                        <a href="" class="a">个护</a>
                        <span class="dot">.</span>
                        <a href="" class="a">清洁</a>
                        <span class="dot">.</span>
                        <a href="" class="a">母婴</a>
                    </span>
                </li>
                <li class="item">
                    <img src="./img/bangong.png" alt="" class="img">
                    <span class="list">
                        <a href="" class="a">办公</a>
                        <span class="dot">.</span>
                        <a href="" class="a">五金</a>
                        <span class="dot">.</span>
                        <a href="" class="a">装修</a>
                        <span class="dot">.</span>
                        <a href="" class="a">农业</a>
                    </span>
                </li>
                <li class="item">
                    <img src="./img/shu.png" alt="" class="img">
                    <span class="list">
                        <a href="" class="a">礼品</a>
                        <span class="dot">.</span>
                        <a href="" class="a">图书</a>
                        <span class="dot">.</span>
                        <a href="" class="a">生活服务</a>
                    </span>
                </li>
            </ul>
        </div>
        <div class="right-content">
            <div class="channels">
                <div class="wrap clearfix">
                    <a href="" class="item">首页</a>
                    <a href="" class="item">特惠好物</a>
                    <a href="" class="item">大额优惠券</a>
                    <a href="" class="item">潮流女装</a>
                    <a href="" class="item">居家生活</a>
                    <a href="" class="item">鞋包饰品</a>
                    <a href="" class="item">母婴儿童</a>
                    <a href="" class="item">食品饮料</a>
                    <a href="" class="item">数码配件</a>
                </div>
            </div>
            <div class="swiper" id="swiper1">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><a href=""><img src="./img/banner1.png" alt=""></a></div>
                    <div class="swiper-slide"><a href=""><img src="./img/banner2.jpg" alt=""></a></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>

                <!-- 如果需要滚动条 -->

            </div>
            <!-- 轮播1 -->
            <div class="swiper" id="swiper2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href=""><img src="./img/b1.jpg" alt="" class="img1"></a>
                        <div class="card-info">
                            <a href="" class="card-title">
                                <img src="./img/icon1.png" alt="" class="icon">
                                <span class="title">津嘉赞 蔬菜小饼干十二蔬饼90g 九蔬薄脆饼干早餐饼网红休闲零食袋装</span>
                            </a>
                            <div class="card-tag"></div>
                            <div class="card-detail">
                                <div class="all-prices">
                                    <span class="discount-price">
                                        <i>¥</i>
                                        4.12
                                    </span>
                                    <span class="initial-price">
                                        <i>¥</i>
                                        8.24
                                    </span>
                                </div>
                                <a href="" class="purchase-btn">去购买</a>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <a href=""><img src="./img/b2.jpg" alt="" class="img1"></a>
                        <div class="card-info">
                            <a href="" class="card-title">
                                <img src="./img/icon2.png" alt="" class="icon">
                                <span class="title">小苏打粉清洁去污清洗剂家用卫生间瓷砖强力除水垢多功能衣服厨房</span>
                            </a>
                            <div class="card-tag"></div>
                            <div class="card-detail">
                                <div class="all-prices">
                                    <span class="discount-price">
                                        <i>¥</i>
                                        7.8
                                    </span>
                                    <span class="initial-price">
                                        <i>¥</i>
                                        7.8
                                    </span>
                                </div>
                                <a href="" class="purchase-btn">去购买</a>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <a href=""><img src="./img/b3.jpg" alt="" class="img1"></a>
                        <div class="card-info">
                            <a href="" class="card-title">
                                <img src="./img/icon1.png" alt="" class="icon">
                                <span class="title">【山东老字号】食圣99鲜 酱油 生抽酱油 210天纯粮酿造特级生抽 炖\/蒸\/炒菜\/凉拌蘸点 150ml</span>
                            </a>
                            <div class="card-tag"></div>
                            <div class="card-detail">
                                <div class="all-prices">
                                    <span class="discount-price">
                                        <i>¥</i>
                                        4.9
                                    </span>
                                    <span class="initial-price">
                                        <i>¥</i>
                                        9.9
                                    </span>
                                </div>
                                <a href="" class="purchase-btn">去购买</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div> -->
            </div>
        </div>
    </div>
    <!-- 限时秒杀 -->
    <div class="line2 box-center">
        <div class="guochao">
            <div class="info">
                <div class="inner">
                    <h2 class="title">购物直达</h2>
                    <div class="desc"></div>
                    <div class="bg"></div>
                </div>
            </div>
            <ul class="list">
                <li class="card">
                    <a href="" class="a">
                        <img src="./img/a1.jpg" alt="" class="img">
                        <span class="cover"></span>
                        <div class="title">
                            <img src="./img/jd.png" alt="" class="icon">
                            京东商城多快好省一键直达
                        </div>
                        <div class="price">
                            <span class="now">购物直达</span>
                        </div>
                    </a>
                </li>
                <li class="card">
                    <a href="" class="a">
                        <img src="./img/a2.jpg" alt="" class="img">
                        <span class="cover"></span>
                        <div class="title">
                            <img src="./img/苏宁.png" alt="" class="icon">
                            苏宁易购专注好服务送货更准时
                        </div>
                        <div class="price">
                            <span class="now">购物直达</span>
                        </div>
                    </a>
                </li>
                <li class="card">
                    <a href="" class="a">
                        <img src="./img/a3.jpg" alt="" class="img">
                        <span class="cover"></span>
                        <div class="title">
                            <img src="./img/tao.png" alt="" class="icon">
                            爱淘宝身边的精品购物平台
                        </div>
                        <div class="price">
                            <span class="now">购物直达</span>
                        </div>
                    </a>
                </li>
                <li class="card">
                    <a href="" class="a">
                        <img src="./img/a4.jpg" alt="" class="img">
                        <span class="cover"></span>
                        <div class="title">
                            <img src="./img/天猫.png" alt="" class="icon">
                            淘宝特卖品质特卖源头直供
                        </div>
                        <div class="price">
                            <span class="now">购物直达</span>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="right">
            <div class="secondkill">
                <h2 class="title">限时秒杀</h2>
                <div class="time-wrap">
                    <span class="time-title">
                        <!-- <span class="time"></span> -->
                        距离本场结束还剩
                    </span>
                    <span class="time-detail">
                        <span>00</span>
                        <i>:</i>
                        <span>00</span>
                        <i>:</i>
                        <span>00</span>
                    </span>
                </div>
                <!-- 限时秒杀轮播图 -->
                <div class="swiper" id="swiper3">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="sWrap">
                                <a href="" class="sCard">
                                    <img src="./img/d1.jpg" alt="" class="img">
                                    <div class="border"></div>
                                    <div class="desc">精品料酒800ml*1壶</div>
                                    <div class="price clearfix">
                                        <span class="now">
                                            ¥
                                            <span class="number">3.9</span>
                                        </span>
                                        <span class="origin">¥7.3</span>
                                    </div>
                                </a>
                            </div>
                            <div class="sWrap">
                                <a href="" class="sCard">
                                    <img src="./img/d2.jpg" alt="" class="img">
                                    <div class="border"></div>
                                    <div class="desc">手工鸡蛋卷奶香味 200g</div>
                                    <div class="price clearfix">
                                        <span class="now">
                                            ¥
                                            <span class="number">3.48</span>
                                        </span>
                                        <span class="origin">¥5.6</span>
                                    </div>
                                </a>
                            </div>
                            <div class="sWrap">
                                <a href="" class="sCard">
                                    <img src="./img/d3.jpg" alt="" class="img">
                                    <div class="border"></div>
                                    <div class="desc">网红黑巧克力5袋</div>
                                    <div class="price clearfix">
                                        <span class="now">
                                            ¥
                                            <span class="number">5.6</span>
                                        </span>
                                        <span class="origin">¥25.6</span>
                                    </div>
                                </a>
                            </div>
                            <div class="sWrap">
                                <a href="" class="sCard">
                                    <img src="./img/d4.jpg" alt="" class="img">
                                    <div class="border"></div>
                                    <div class="desc">手工奶香法饼30个</div>
                                    <div class="price clearfix">
                                        <span class="now">
                                            ¥
                                            <span class="number">8.2</span>
                                        </span>
                                        <span class="origin">¥38.2</span>
                                    </div>
                                </a>
                            </div>
                            <div class="sWrap">
                                <a href="" class="sCard">
                                    <img src="./img/d5.jpg" alt="" class="img">
                                    <div class="border"></div>
                                    <div class="desc">麻辣海带丝5袋250克</div>
                                    <div class="price clearfix">
                                        <span class="now">
                                            ¥
                                            <span class="number">9.2</span>
                                        </span>
                                        <span class="origin">¥39.2</span>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="fanxianhaowu">
                <h2 class="title">超级特卖场</h2>
                <div class="box-wrap">
                    <ul class="card-list">
                        <li class="card-wrap">
                            <a href="" class="card">
                                <div class="img-wrap">
                                    <img src="./img/c1.jpg" alt="" class="img">
                                    <div class="border"></div>
                                </div>
                                <div class="desc">大牌美妆 爆款五折</div>
                            </a>
                        </li>
                        <li class="card-wrap">
                            <a href="" class="card">
                                <div class="img-wrap">
                                    <img src="./img/c2.png" alt="" class="img">
                                    <div class="border"></div>
                                </div>
                                <div class="desc">京东生鲜 新鲜到家</div>
                            </a>
                        </li>
                        <li class="card-wrap">
                            <a href="" class="card">
                                <div class="img-wrap">
                                    <img src="./img/c3.png" alt="" class="img">
                                    <div class="border"></div>
                                </div>
                                <div class="desc">天猫国际 大牌特卖</div>
                            </a>
                        </li>
                        <li class="card-wrap">
                            <a href="" class="card">
                                <div class="img-wrap">
                                    <img src="./img/c4.png" alt="" class="img">
                                    <div class="border"></div>
                                </div>
                                <div class="desc">电脑馆 潮玩好物集</div>
                            </a>
                        </li>
                        <li class="card-wrap">
                            <a href="" class="card">
                                <div class="img-wrap">
                                    <img src="./img/c5.png" alt="" class="img">
                                    <div class="border"></div>
                                </div>
                                <div class="desc">猫超尖货，超值特惠</div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 好物精选 -->
    <div class="line3 box-center">
        <div class="feed">
            <h2 class="feed-title">好物精选</h2>
            <ul class="content">
                <!-- <li>
                    <img src="${item.img_big_logo}" alt="">
                    <p class="des">${item.title}</p>
                    <p class="price">￥:${item.price}</p>
                    <button class="btn" data-id="${item.goods_id}">加入购物车</button>
                </li> -->
            </ul>
            <div class="pager">
                <ul>
                    <!-- <li class="show">1</li>
                    <li data-id=2>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>  -->
                </ul>
            </div>
        </div>
    </div>
    <div class="line4 box-center">
        <span>我也是有底线的</span>
    </div>
    <div class="bottom">
        <div class="backTop">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-huidaodingbu"></use>
            </svg>
        </div>
        <div class="kefu">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-kefufill"></use>
            </svg>
        </div>
        <a href="./html/cart.html">
            <div class="total">购物车<span>0</span></div>
        </a>
    </div>
    <script src="./libs/swiper-bundle.min.js"></script>
    <script src="./libs/require.js" data-main="./js/index"></script>
</body>

</html>